﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery EasyUI Extensions - Sample</title>

    <link href="../../../jquery-easyui-themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../../jquery-easyui-themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../../../jquery/jquery-1.11.2.js" type="text/javascript"></script>
    <script src="../../../jquery-easyui-1.4.3/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../../jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../../../jquery-extensions/jquery.jdirk.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var board = $("#board"),
                wrapper = board.parent(),
                cc = $("#cc");
            cc.draggable("options").onDrag = function (e) {
                var shadow = $(this).data("shadow");
                if (!shadow || !shadow.length) {
                    shadow = $("<div style='z-index: 10; position: absolute; background-color: yellow; border: 2px blue solid;'>我是一个遮板</div>")
                        .css({ height: cc.height(), width: cc.width() }).appendTo(wrapper);
                    $(this).data("shadow", shadow);
                    shadow.draggable({
                        onDrag: function (ee) {
                            cc.css({
                                left: ee.data.left - pos.left - 2,
                                top: ee.data.top - pos.top - 2
                            });
                        }
                    }).resizable({
                        onResize: function (ee) {
                            cc.width(ee.data.width);
                            cc.height(ee.data.height);
                        }
                    });
                }
                var pos = board.position();
                shadow.css({
                    left: e.data.left + pos.left + 2,
                    top: e.data.top + pos.top + 2
                });
            };
        });
    </script>
</head>
<body class="easyui-layout" data-options="fit: true">
    <div id="north" data-options="region: 'north', title: 'north', collapsed: true, split: true" style="height: 100px;"></div>

    <div id="west" data-options="region: 'west', title: 'west', split: true" style="width: 100px;"></div>

    <div id="center" data-options="region: 'center', title: 'center', split: true" style="padding: 0;">
        <div style="width: 100%; height: 100%; padding: 0; margin: 0;">
            <div id="board" style="background-color: white; z-index: 100; position: relative; left: 300px; overflow: hidden; padding: 0; width: 600px; height: 100%; border: 2px red solid;">
                我是画布
                <div id="cc" class="easyui-draggable easyui-resizable" style="border: 2px blue solid; width: 100px; height: 60px; background-color: red;">我是一个控件</div>
            </div>
        </div>
    </div>

    <div id="east" data-options="region: 'east', title: 'east', collapsed: true, split: true" style="width: 200px;"></div>

    <div id="south" data-options="region: 'south', title: 'south', collapsed: true, split: true" style="height: 100px;"></div>
</body>
</html>
